<template>
	<view class="login" :style="{'min-height':minHeight}">
		<view class="login-bg">
			uli
			<!-- <image src="../../static/images/logo-bg.png" mode=""></image> -->
		</view>
		<form class="login-form">
			<view class="login-section">
				<image style="width: 26upx; height: 38upx;" src="../../static/images/mobile.png" mode="widthFix"></image>
				<input type="text" name="name" placeholder="请输入账号" hover-stay-time="70" @input="nameInput">
			</view>
			<view class="login-section">
				<image style="width: 30upx; height: 42upx;" src="../../static/images/operat-icon1.png" mode="widthFix"></image>
				<input type="text" name="password" placeholder="请输入密码" hover-stay-time="70" @input="passwordInput">
			</view>
			<view class="login-section">
				<image style="width: 30upx; height: 42upx;" src="../../static/images/operat-icon2.png" mode="widthFix"></image>
				<input type="text" name="passwordb" placeholder="请确认密码" hover-stay-time="70" @input="passwordbInput">
			</view>
			<view class="login-section">
				<image style="width: 30upx; height: 42upx;" src="../../static/images/center-icon5.png" mode="widthFix"></image>
				<input type="text" name="mailbox" placeholder="请输入邮箱号" hover-stay-time="70" @input="mailboxInput">
			</view>
			<!-- <view class="login-section">
				<image style="width: 26upx; height: 38upx;" src="../../static/images/mobile.png" mode="widthFix"></image>
				<input type="text" name="mobile" placeholder="请输入您的手机号" hover-stay-time="70" @input="mobileInput">
			</view>
			<view class="login-section">
				<image style="width: 30upx; height: 37upx;" src="../../static/images/key.png" mode="widthFix"></image>
				<input type="text" name="vertify" placeholder="请输入验证码" hover-stay-time="70" @input="codeInput">
				<button class="login-count-back" :class="{disabled:disabled}" hover-class="click" hover-stay-time="70" @click="getCode">{{!time?tip:time+'秒重获'}}</button>
			</view> -->
			<button class="login-btn" hover-class="click" hover-stay-time="70" @click="submitLogin">立即注册</button>
		</form>
		<!-- <image class="background_img" src="../../static/images/logo-bg.png"></image> -->
	</view>
</template>

<script>
	
	
	// import apiList from '../../modules/api/apiList'
	// const cm = apiList();
	
	export default {
		data() {
			return {
				name: '',//账号
				password: '',//密码
				password: '',//确认密码
				mailbox: ""//邮箱号
				// disabled: false,
				// minHeight: '100%'
			}
		},
		onLoad(){
			this.init()
		},
		methods: {
			//初始化
			async init(){
				// const systemInfo = await .systemInfo()
				// this.minHeight= systemInfo.windowHeight+'px'
			},
			//账号
			nameInput(e){
				this.s = e.detail.value
			},
			//密码
			passwordInput(e){
				this.mobile = e.detail.value
			},
			passwordbInput(e){
				this.mobile = e.detail.value
			},
			
			mailboxInput(e){
				this.mobile = e.detail.value
			},
			//输入手机号
			mobileInput(e){
				this.mobile = e.detail.value
			},
			//输入验证码
			codeInput(e){
				this.code = e.detail.value
			},
			//获取认证码
			async getCode(){
				if(this.time){
					return cm.tip(this.time+'秒后可重新获取')
				}
				if(!(/^1[3456789]\d{9}$/).test(this.mobile)){
					return cm.tip('手机号输入有误')
				}
				// cm.loading2('发送中..')
				// const data = this.mergeData(['login.bind_mobile'],{ mobile: this.mobile })
				// const result = await cm.get(data)
				// cm.hideLoading2()
				// cm.tip(result.data.msg)
				// this.disabled = true
				// this.tick()
			},
			
			//倒计时60秒
			tick(){
				var ntime = 60
				const that = this
				const interval = setInterval(res=>{
					that.time = ntime 
					if(ntime==0){
						that.disabled = false
						clearInterval(interval)
					}
					ntime--
				},1000)
			},
			//提交登录
			async submitLogin(){
				if(!(/^1[3456789]\d{9}$/).test(this.mobile)){
					return cm.tip('手机号输入有误')
				}
				const data = this.mergeData(['login.login'],{ mobile: this.mobile, code: this.code });
				const result = await cm.get(data)
				if(result.data.status==1){
					await cm.setStorage(this.globalData.storagekey, {userInfo: result.data.result.member})
					cm.tip('登录成功！')
					setTimeout(res=>{
						cm.navBack(1)
					},2000)
				}else{
					return cm.tip(result.data.result.message)
				}
			},
	    },
	}
</script>


<style>
	page {
		height: 100vh;
	}
	.login{
		height:100vh;
		position:relative;
	}
	.login-bg{
		position:absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: -1;
		font-size: 0;
	}
	.login-bg image{
		width:100%;
		height:100%;
	}
	.login-form{
		display: block;
		position: absolute;
		width:100%;
		top:100upx;
	}
	.login .login-section{
		display:flex;
		width:600upx;
		margin:0 auto;
		margin-top:20upx;
		height:140upx;
		align-items: center;
	}
	.login .login-section image{
		width:48upx;
		margin-right: 20upx;
	}
	.login .login-section input{
		border-bottom: 1px solid #f1f1f1;
		height:50upx;
		line-height: 50upx;
		padding: 15upx 0;
		font-size:28upx;
	}
	input[name="mobile"]{
		width:520upx;
	}
	input[name="vertify"]{
		width:280upx;
	}
	.login-count-back{
		width:220upx;
		background:#62B4FE;
		height:80upx;
		line-height:80upx;
		text-align:center;
		font-size:26upx;
		border-radius: 10upx;
		color:#FFFFFF;
	}
	.login-count-back.disabled{
		background:#CACACA;
	}
	.login-btn{
		height:100upx;
		line-height: 100upx;
		width:550upx;
		background:#62B4FE;
		color:#FFFFFF;
		font-size:34upx;
		margin-top:100upx;
	}
	.click{
		opacity: 0.7;
	}
	.background_img {
		width: 100%;
		height: 261upx;
	}
</style>
